<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-28 19:39:55
 * @LastEditTime: 2023-06-29 12:33:44
 * @FilePath: \my-project\src\components\SwiperBar.vue
-->
<template>
  <div id="swipercom">
      <div class="swiper-container" id="swiperIndex">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,i) in indexBanners" :key="i">
                  <img :src="item.carousel" alt="!">
              </div>
          <div class="swiper-pagination">
          </div>
      </div>
  </div>
  </div>
</template>

 
<script>
 import 'swiper/css/swiper.css'  //引入swiper样式
    import Swiper from 'swiper';	//引入swiper
    export default {
        props: {
          indexBanners: {
            type: Array
          }
        },
        data(){
            return{
            }
        },
        mounted() {
        },
        updated() {
            new Swiper('#swiperIndex',{
                //配置分页器内容
                observer:true,//修改swiper自己或子元素时，自动初始化swiper 
                observeParents:false,//修改swiper的父元素时，自动初始化swiper 
                autoplay: true,
                loop: true, // 循环模式选项
                // pagination:{
                //     el:".swiper-pagination",//换页器与哪个标签关联
                //     clickable:true//分页器是否可以点击
                // },
                // 如果需要前进后退按钮
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
                // //如果需要滚动条
                // scrollbar: {
                //     el: '.swiper-scrollbar',
                // },

            })
        }
    }
</script>
<style lang="scss" scoped>
 .swiper {
  height: 300px;
  width: 100%;
  border: 1px transparent solid;

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background-color: rgb(98, 168, 200);
  }
}
</style>